<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" >
		<title>Chinese Chess</title>
		<style>
			#chessBoard {
				position: fixed;
				font-family: monospace;
				font-size: 14px;
				left: 0;
				top:0;
				height: calc(100% - 30px);
				bottom:30px;
				right:0;
				box-shadow: 1px 1px 1px #555;
			}
			#statusBar {
				position: fixed;
				left:0;
				bottom:0;
				right:0;
				height: 30px;
				line-height: 30px;
				padding: 0 10px;
				background-color: #ddd;
				box-shadow: inset 0px 0px 2px #888;
				font-size: 12px;
				color: #666;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<canvas id="chessBoard"></canvas>
		<div id="statusBar"></div>
		<audio id="sound" style="display:none"></audio>
		<script src="renderer.js"></script>
	</body>
</html>
